<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，
			当然还需要加宽度width属来兼容部分浏览。
		-->
		<style type="text/css">
			/*单行文本溢出*/
			.item:nth-child(1){
				overflow: hidden;
				text-overflow:ellipsis ;
				white-space: nowrap;
				width: 200px;
			}
			/*多行文本溢出*/
			.item:nth-child(2){
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
				width: 200px;
			}
		</style>
		<div>	
			<p class="item">关注前端开发 关注用户体验关注前端开发 关注用户体验关注前端开发 关注用户体验关注前端开发 关注用户体验关注前端开发 关注用户体验</p>
	   		<p class="item">关注前端开发 关注用户体验关注前端开发 关注用户体验关注前端开发 关注用户体验关注前端开发 关注用户体验关注前端开发 关注用户体验</p>
		</div>
	

	</body>
</html>
